<!-- 提供各种全局 CSS 变量，安全区域尺寸/小程序胶囊尺寸等 -->
<template>
  <view :style="cssVars" class="base-container" :class="{ 'has-min-height': hasMinHeight }">
    <slot />
  </view>
</template>

<script>
import { getSystemInfo } from "@/utils/device";
import { mapGetters } from "vuex";
// #ifdef MP-WEIXIN
import { getMenuButtonBoundingClientRect } from "@/utils/device";
// #endif

export default {
  name: "BaseContainer",
  props: {
    /**
     * 是否需要最小高度
     */
    hasMinHeight: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const systemInfo = getSystemInfo();
    // #ifdef MP-WEIXIN
    const menuRect = getMenuButtonBoundingClientRect();
    // #endif
    return {
      // #ifdef MP-WEIXIN
      menuRect,
      // #endif
      safeArea: systemInfo.safeArea,
      safeAreaBottomSize: systemInfo.safeAreaInsets.bottom,
      statusBarHeight: systemInfo.statusBarHeight,
      screenWidth: systemInfo.screenWidth,
      screenHeight: systemInfo.screenHeight
    }
  },
  computed: {
    ...mapGetters(["viewColor"]),
    cssVars() {
      const baseCssVars = {
        "--safe-area-inset-top": `${this.statusBarHeight}px`, // 状态栏高度
        "--safe-area-inset-bottom": `${this.safeAreaBottomSize}px`, // 安全区域底部高度
        "--screen-width": `${this.safeArea.width}px`, // 屏幕宽度
        "--screen-height": `${this.safeArea.height}px` // 屏幕高度
      };
      // #ifdef MP-WEIXIN
      Object.assign(baseCssVars, {
        "--menu-btn-height": `${this.menuRect.height}px`, // 胶囊按钮高度
        "--menu-btn-top": `${this.menuRect.top}px`, // 胶囊按钮 y 轴坐标（距离屏幕顶部）
        "--menu-btn-right": `${this.screenWidth - this.menuRect.right}px`, // 胶囊按钮 x 轴坐标（距离屏幕右侧）
        "--menu-btn-width": `${this.menuRect.width}px`, // 胶囊按钮宽度
        "--screen-height": `${this.screenHeight}px` // 屏幕高度
      });
      // #endif

      // 小程序不支持 Object Style 的 CSS 变量，所以需要转换为 CSS 变量字符串
      const varList = Object.entries(baseCssVars)
        .map(([key, value]) => {
          return `${key}: ${value}`;
        });

      // 添加主题 CSS 变量
      varList.push(this.viewColor);
      return varList.join(";");
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.base-container {
  &.has-min-height {
    min-height: var(--screen-height);
  }

  font-family: PingFang SC;

  --nav-padding-y-gap: 10rpx;
  --nav-content-height: 58rpx;

  // #ifdef MP-WEIXIN
  --nav-padding-y-gap: calc(var(--menu-btn-top) - var(--safe-area-inset-top));
  --nav-content-height: var(--menu-btn-height);
  // #endif

  --nav-bar-height: calc(var(--safe-area-inset-top) + var(--nav-padding-y-gap) + var(--nav-content-height));
}
</style>
